<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>工作台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <style>
        .layui-card {
            border: 1px solid #f2f2f2;
            border-radius: 5px;
        }

        .icon {
            margin-right: 10px;
            color: #1aa094;
        }

        .icon-cray {
            color: #ffb800 !important;
        }

        .icon-blue {
            color: #1e9fff !important;
        }

        .icon-tip {
            color: #ff5722 !important;
        }

        .layuimini-qiuck-module {
            text-align: center;
            margin-top: 10px
        }

        .layuimini-qiuck-module a i {
            display: inline-block;
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border-radius: 2px;
            font-size: 30px;
            background-color: #F8F8F8;
            color: #333;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .layuimini-qiuck-module a cite {
            position: relative;
            top: 2px;
            display: block;
            color: #666;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 14px;
        }

        .welcome-module {
            width: 100%;
            height: 210px;
        }

        .panel {
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 3px;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
        }

        .panel-body {
            padding: 10px
        }

        .panel-title {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 12px;
            color: inherit
        }

        .label {
            display: inline;
            padding: .2em .6em .3em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25em;
            margin-top: .3em;
        }

        .layui-red {
            color: red
        }

        .main_btn>p {
            height: 40px;
        }

        .layui-bg-number {
            background-color: #F8F8F8;
        }

        .layuimini-notice:hover {
            background: #f6f6f6;
        }

        .layuimini-notice {
            padding: 7px 16px;
            clear: both;
            font-size: 12px !important;
            cursor: pointer;
            position: relative;
            transition: background 0.2s ease-in-out;
        }

        .layuimini-notice-title,
        .layuimini-notice-label {
            padding-right: 70px !important;
            text-overflow: ellipsis !important;
            overflow: hidden !important;
            white-space: nowrap !important;
        }

        .layuimini-notice-title {
            line-height: 28px;
            font-size: 14px;
        }

        .layuimini-notice-extra {
            position: absolute;
            top: 50%;
            margin-top: -8px;
            right: 16px;
            display: inline-block;
            height: 16px;
            color: #999;
        }
    </style>
</head>

<body>
    <!--搜索开始-->
    <fieldset class="layui-elem-field layuimini-search">
        <legend>搜索信息</legend>
        <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="" id="searchFrm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">开始时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="startTime" id="startTime" readonly="readonly" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">结束时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="endTime" id="endTime" readonly="readonly" autocomplete="off"
                                class="layui-input">
                        </div>
                        <a class="layui-btn " lay-submit="" lay-filter="data-search-btn"><label
                                class="layui-icon layui-icon-search"></label>搜索</a>
                        <a class="layui-btn layui-btn-warm" onclick="javascript:$('#searchFrm')[0].reset()"
                            lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>
    <!--搜索结束-->

    <div class="layuimini-container">
        <div class="layuimini-main">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-lg12">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">




                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <span class="label pull-right layui-bg-blue">实时</span>
                                                <h5>支出</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins" id='Outlay'>*****</h1>
                                                <small>当前支出总金额</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <span class="label pull-right layui-bg-cyan">实时</span>
                                                <h5>收入</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins" id='Revenue'>*****</h1>
                                                <small>当前收入总金额</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <span class="label pull-right layui-bg-cyan">实时</span>
                                                <h5>利润</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins" id='Profit'>*****</h1>
                                                <small>当前利润总金额</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <span class="label pull-right layui-bg-green">实时</span>
                                                <h5>畅销商品</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins" id='Salablegoods'>*****</h1>
                                                <small>当前畅销商品名称</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>


                    </div>
                    <div class="layui-col-lg12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                            <div id="echarts-records-Outlay" style="width: 100%;min-height:400px"></div>
                        </div>

                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>正利润商品排行</div>
                            <div id="echarts-records-PANP1" style="width: 100%;min-height:400px"></div>
                        </div>

                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>负利润商品排行</div>
                            <div id="echarts-records-PANP2" style="width: 100%;min-height:400px"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    </div>
    <script type="text/javascript" src="https://lib.baomitu.com/echarts/5.1.0/echarts.min.js"></script>
    <script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
    <script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
    <script src="../../../lib/common/common.js" charset="utf-8"></script>
    <script>



        layui.use(['form', 'table', 'laydate', 'layer'], function () {
            var form = layui.form;
            var table = layui.table;
            var laydate = layui.laydate;
            var layer = layui.layer;

            //渲染时间选择器
            laydate.render({
                elem: '#startTime',
                type: 'datetime'
            });
            laydate.render({
                elem: '#endTime',
                type: 'datetime'
            });

            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                $.get(api + "statement/queryOutlay", data.field, function (res) {
                    // console.log(res);
                    $('#Outlay').text(res + '(元)')


                    $.get(api + "statement/queryRevenue", data.field, function (res) {
                        // console.log(res);
                        $('#Revenue').text(res + '(元)')

                        $.get(api + "statement/queryProfit", data.field, function (res) {
                            // console.log(res);
                            $('#Profit').text(res + '(元)')



                            var data_goodsname = [];
                            var data_goodsnum = [];
                            $.get(api + "reports/querySalableGoods", data.field, function (res) {
                                for (i in res) {
                                    data_goodsname.push(Object.keys(res[i])[0]);
                                    data_goodsnum.push(Object.values(res[i])[0]);
                                }
                                $('#Salablegoods').text(Object.keys(res[0]))


                            });
                            var data_month1 = [];
                            var data_month2 = [];
                            var data_month3 = [];
                            var data_outlay = [];
                            var data_revenue = [];
                            var data_profit = [];
                            $.get(api + "statement/monthlysum", data.field, function (res) {
                                // console.log(res);
                                var monthlyoutlay = res.monthlyoutlay;
                                var monthlyrevenue = res.monthlyrevenue;
                                var monthlyprofit = res.monthlyprofit;




                                /**
                                 * 报表功能
                                 */

                                for (i in monthlyoutlay) {
                                    data_month1.push(Object.keys(monthlyoutlay[i])[0]);
                                    data_outlay.push(Object.values(monthlyoutlay[i])[0]);

                                }

                                for (i in monthlyrevenue) {
                                    data_month2.push(Object.keys(monthlyrevenue[i])[0]);
                                    data_revenue.push(Object.values(monthlyrevenue[i])[0]);

                                }
                                for (i in monthlyprofit) {
                                    data_month3.push(Object.keys(monthlyprofit[i])[0]);
                                    data_profit.push(Object.values(monthlyprofit[i])[0]);

                                }

                                var echartsRecords1 = echarts.init(document.getElementById('echarts-records-Outlay'), 'walden');
                                var chartDom1 = document.getElementById('echarts-records-Outlay');
                                var myChart1 = echarts.init(chartDom1);
                                var option1;
                                var optionRecords1 = {
                                    tooltip: {

                                        trigger: 'axis',
                                        axisPointer: {
                                            type: 'shadow'

                                        }
                                    },
                                },
                                    option1 = {
                                        title: {
                                            text: '查询时间段支出/收入/利润金额'
                                        },
                                        legend: {},
                                        grid: {
                                            left: '3%',
                                            right: '4%',
                                            bottom: '3%',
                                            containLabel: true
                                        },
                                        xAxis: {
                                            type: 'category',
                                            data: data_month3,

                                        },
                                        yAxis: {
                                            type: 'value'
                                        },
                                        series: [
                                            {
                                                name: '支出',
                                                data: data_outlay,
                                                type: 'line',
                                                smooth: true,
                                                itemStyle: {
                                                    normal: { color: 'MediumVioletRed' }
                                                }
                                            },


                                            {
                                                name: '收入',
                                                data: data_revenue,
                                                type: 'line',
                                                smooth: true,
                                                itemStyle: {
                                                    normal: { color: 'blue' }
                                                }
                                            },


                                            {
                                                name: '利润',
                                                data: data_profit,
                                                type: 'line',
                                                smooth: true,
                                                itemStyle: {
                                                    normal: { color: 'green' }
                                                }
                                            }
                                        ]
                                    };

                                option1 && myChart1.setOption(option1);

                                option1 && echartsRecords1.setOption(optionRecords1);

                                var data_goodsname1 = [];
                                var data_profit1 = [];
                                $.get(api + "statement/querypprofit", data.field, function (res) {
                                    console.log(res);

                                    for (i in res) {
                                        data_goodsname1.push(Object.keys(res[i])[0]);
                                        data_profit1.push(Object.values(res[i])[0]);

                                    }
                                    var echartsRecords2 = echarts.init(document.getElementById('echarts-records-PANP1'), 'walden');
                                    var chartDom2 = document.getElementById('echarts-records-PANP1');
                                    var myChart2 = echarts.init(chartDom2);
                                    var option2;

                                    option2 = {
                                        title: {
                                            text: '正利润商品情况',
                                            subtext: '建议多进货',
                                            left: 'center'
                                        },
                                        tooltip: {
                                            trigger: 'item'
                                        },
                                        legend: {
                                            orient: 'vertical',
                                            left: 'left'
                                        },
                                        series: [
                                            {
                                                name: 'Access From',
                                                type: 'pie',
                                                radius: '50%',
                                                data: [
                                                    { value: data_profit1[0], name: data_goodsname1[0] },
                                                    { value: data_profit1[1], name: data_goodsname1[1] },
                                                    { value: data_profit1[2], name: data_goodsname1[2] },
                                                    { value: data_profit1[3], name: data_goodsname1[3] },
                                                    { value: data_profit1[4], name: data_goodsname1[4] }
                                                ],
                                                emphasis: {
                                                    itemStyle: {
                                                        shadowBlur: 10,
                                                        shadowOffsetX: 0,
                                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                    }
                                                }
                                            }
                                        ]
                                    };
                                    option2 && myChart2.setOption(option2);


                                    var data_goodsname2 = [];
                                    var data_profit2 = [];
                                    $.get(api + "statement/querynprofit", data.field, function (res) {
                                        console.log(res);

                                        for (i in res) {
                                            data_goodsname2.push(Object.keys(res[i])[0]);
                                            data_profit2.push(Object.values(res[i])[0]);

                                        }
                                        var echartsRecords3 = echarts.init(document.getElementById('echarts-records-PANP2'), 'walden');
                                        var chartDom3 = document.getElementById('echarts-records-PANP2');
                                        var myChart3 = echarts.init(chartDom3);
                                        var option3;

                                        option3 = {
                                            title: {
                                                text: '负利润商品情况',
                                                subtext: '建议少进货',
                                                left: 'center'
                                            },
                                            tooltip: {
                                                trigger: 'item'
                                            },
                                            legend: {
                                                orient: 'vertical',
                                                left: 'left'
                                            },
                                            series: [
                                                {
                                                    name: 'Access From',
                                                    type: 'pie',
                                                    radius: '50%',
                                                    data: [
                                                        { value: data_profit2[0], name: data_goodsname2[0] },
                                                        { value: data_profit2[1], name: data_goodsname2[1] },
                                                        { value: data_profit2[2], name: data_goodsname2[2] },
                                                        { value: data_profit2[3], name: data_goodsname2[3] },
                                                        { value: data_profit2[4], name: data_goodsname2[4] }
                                                    ],
                                                    emphasis: {
                                                        itemStyle: {
                                                            shadowBlur: 10,
                                                            shadowOffsetX: 0,
                                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                        }
                                                    }
                                                }
                                            ]
                                        };

                                        option3 && myChart3.setOption(option3);

                                        // echarts 窗口缩放自适应
                                        window.onresize = function () {
                                            echartsRecords1.resize();
                                            echartsRecords2.resize();
                                            echartsRecords3.resize();
                                        }
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    </script>
</body>

</html>